<template>
	<view class="container" style="background-image: url('/static/background/back7.jpg');">
		<view class="maintitle">
			{{chaodai}}服饰文化：
			<view>
				{{title}}
			</view>

			<view class="content">
				{{selectedtopic}}
			</view>
		</view>
		<view v-for="(item,index) in selecteddata" :key="index">
			<view class="title">
				{{item.selectedt}}
			</view>

			<view class="content">
				{{item.selectedc}}
			</view>
		</view>

		<view class="content">
			{{selecteds}}
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.getDynasty(options.id);
		},
		data() {
			return {
				chaodai: '',
				title: '',
				selectedtopic: '',
				selecteddata: [],
				selecteds: '',
			}
		},
		methods: {
			async getDynasty(id) {
				try {
					const res = await uni.$http.get(`/home/dynasty/${id}`);
					console.log("朝代信息", res);
					if (res.statusCode !== 200) {
						throw new Error(`HTTP错误，状态码：${res.statusCode}`); //会交给catch处理
					}
					if (res.statusCode === 200 && res.data.code === 1) {
						this.chaodai = res.data.data.dynastyName;
						this.title = res.data.data.title;
						this.selectedtopic = res.data.data.topic;
						this.selecteddata = res.data.data.data;
						this.selecteds = res.data.data.summary;
					}
				} catch(error) {
					// 网络错误处理
					console.error('请求发生错误:', error);
					uni.showToast({
						title: '网络连接失败，请稍后重试',
						icon: 'none',
						duration: 1500
					});
				}
			}
		}
	}
</script>

<style scoped>
	.maintitle {
		font-family: "STKaiti", "SimSun", "KaiTi";
		font-size: 24px;
		font-weight: bold;
		padding-top: 10px;
		margin-bottom: 10px;
		border-bottom: 2rpx solid #eee;
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
		color: #5e2c2c;
		display: block;
		margin-bottom: 20rpx;
		border-left: 8rpx solid #8b2a2a;
		padding-left: 20rpx;
	}

	.content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		display: block;
		margin-bottom: 30rpx;
	}
</style>